<template>
  <div>
    <el-menu
      ref="kzMenu"
      :unique-opened="true"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="isCollapse"
      :router="true"
      :default-active="this.$route.path"
    >
      <template v-for="item of list">
        <el-submenu
          :index="item.path"
          v-if="item.children&&item.meta.is_menu"
          :key="item.meta.title"
        >
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span>{{ item.meta.title }}</span>
          </template>
          <menu-list :list="item.children"></menu-list>
          <!--递归调用-->
        </el-submenu>

        <router-link v-else :key="item.path" :to="item.path">
          <el-menu-item :index="item.path" :key="item.meta.title">
           
            <span slot="title">{{ item.meta.title }}</span>
          </el-menu-item>
        </router-link>
      </template>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "MenuList",
  props: {
    list: Array,
    isCollapse: Boolean,
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath, "222");
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath, "111");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath, "333");
    },
  },
  mounted() {},
 
};
</script>
<style>
.el-submenu{
    box-shadow: h-offset v-offset blur stef;
}
.el-menu-item {
    font-size: 20px;
   
}
.el-submenu__title{
    font-size: 24px;
}
.index {
  width: 100%;
  height: 100%;
}
</style>